<template>
  <div class="home">
    <el-page-header @back="$router.back()" :content="course.courseName">
    </el-page-header>
    <el-card>
      <el-tree :data="lessons" :props="defaultProps" draggable>
        <span class="custom-tree-node" slot-scope="{ data }">
          <span>{{ data.sectionName || data.theme }}</span>
          <div>
            <el-button size="mini" type="text">编辑</el-button>
            <el-button size="mini" type="text">
              {{ data.sectionName ? '添加课时' : '上传视频' }}
            </el-button>
            <el-button size="mini" type="text">
              {{ data.status === 0 ? '已隐藏' : (data.status === 1 ? '未更新' : '已更新') }}
            </el-button>
          </div>
        </span>
      </el-tree>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getCourseById, getSectionAndLesson } from '@/services/course'

export default Vue.extend({
  name: 'CourseAdmin',
  props: {
    courseId: {
      type: [Number, String],
      required: true
    }
  },
  created () {
    this.loadCourseInfo()
    this.loadCourseLesson()
  },
  data () {
    return {
      course: {},
      lessons: [],
      defaultProps: {
        children: 'lessonDTOS',
        label: 'sectionName'
      }
    }
  },
  methods: {
    async loadCourseInfo () {
      const { data } = await getCourseById(this.courseId)
      this.course = data.data
    },
    async loadCourseLesson () {
      const { data } = await getSectionAndLesson(this.courseId)
      // await this.getLessonName(data.data)
      this.lessons = data.data
    },
    getLessonName (item: any) {
      item.forEach((lessons: any) => {
        if (lessons.lessonDTOS) {
          lessons.lessonDTOS.forEach((lesson: any) => {
            lesson.sectionName = lesson.theme
          })
        }
      })
    }
  }
})
</script>

<style lang="scss" scoped>
.el-page-header {
  margin-bottom: 20px;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
